<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form style="float: left">
            <!-- <el-button size="mini" type="primary" @click="getData"
              >查 询</el-button
            > -->
            <el-button size="mini" type="success" @click="showAddDialog"
              >新 增</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="机构名称"
        label="机构名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="所属楼宇"
        label="所属楼宇"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="创建日期"
        label="创建日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="人员数量"
        label="人员数量"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.DELETE_STATUS === '1'"
            style="color: #ff0000"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="formDialog.title"
      :visible.sync="formDialog.show"
      width="40%"
    >
      <el-form
        ref="formDialog"
        :model="formDialog"
        label-width="100px"
        class="flex"
      >
        <el-form-item label="机构名称：">
          <el-input
            style="width: 200px"
            v-model="formDialog.OrgName"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择楼宇：">
          <el-select
            v-model="formDialog.ParentID"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in buildingList"
              :key="item.OrgID"
              :label="item.楼宇名称"
              :value="item.OrgID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formDialog: {
        title: '新增组织机构',
        show: false,
        OrgName: '',
        ParentID: '',
        CreateUserID: '',
      },
      buildingList: [],
      tableData: [],
      originalData: [],
    }
  },
  mounted () {
    this.getBuildingList()
    this.getData()
  },
  methods: {
    // 获取 楼宇
    async getBuildingList () {
      var url = 'System/GetBuildingInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.buildingList = data
    },
    // 获取 组织机构
    async getData () {
      var url = 'System/GetOrganizationInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      console.log(data)
      // this.originalData = [{"VID":535,"WORKDATE":"2021-06-16","AM_IN":"06:28:50","AM_OUT":"11:00:49","PM_IN":"13:20:57","PM_OUT":"22:03:01","APOINT":40,"WORKCOUNT":"7.5","CPOINT":30,"WORKTIME":"224","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"刘广梅","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":541,"WORKDATE":"2021-06-16","AM_IN":"04:56:33","AM_OUT":"11:01:22","PM_IN":"13:25:36","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"19.1","CPOINT":30,"WORKTIME":"370","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"孟广珍","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":552,"WORKDATE":"2021-06-16","AM_IN":"04:46:50","AM_OUT":"11:04:35","PM_IN":"13:24:25","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"24.2","CPOINT":30,"WORKTIME":"456","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"郭天利 ","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null}]
      this.personQuery()
    },
    // 模糊查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // const { name, client } = this.person
      // if (name) this.tableData = this.tableData.filter(item => item.CLIENT_NAME.includes(name))
      // if (this.teamValue != '全部') this.tableData = this.tableData.filter(item => this.teamValue == item.TITLE)
    },
    // 组织机构 新增
    handleAdd () {
      console.log(this.formDialog)
      this.$axios({
        url: 'System/AddOrganizationInfo',
        method: 'post',
        data: this.formDialog
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功')
          this.formDialog.show = false;
          this.getData()
        } else {
          this.$message.error('新增失败' + '，' + res.data.Message);
        }
      })
    },
    // 打开新增窗口
    showAddDialog () {
      //清空编辑框
      this.formDialog = {
        title: '新增组织机构',
        show: false,
        OrgName: '',
        ParentID: '',
        CreateUserID: localStorage.getItem('UserID'),
      },
        //展示窗口
        this.formDialog.show = true;
    },
    // 删除
    async handleDelete (index, row) {
      var url = 'System/DeleteOrganizationInfo?OrgID=' + row.OrgID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('删除成功')
        this.getData()
      } else {
        this.$message.error('删除失败');
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
    },
    handleSizeChange (size) {
      this.pageSize = size;
      // console.log(this.pageSize)
    }
  }
}
</script>
<style>
</style>